<template>
  <div>
    <section>
      <el-form ref="form" :model="queryForm" label-width="81px" :inline="true" class="queryForm">
        <el-form-item label="关键字:">
          <el-input v-model="queryForm.selectValue" size="small" placeholder="请输入提示码/提示场景/提示内容查询"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="but-container">
            <el-button type="primary" style="margin-right:5px" size="small" @click="refreshList(page,orderBy.name,orderBy.method,queryForm.selectValue,queryForm.checkedState)">查询</el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </section>
    <section style="margin-top: -6px">
    </section>
    <section class="right-but" style="display:flex">
      <span style="margin-right:10px;cursor:pointer;" @click="refreshList(page,orderBy.name,orderBy.method,queryForm.selectValue)">
        <img style="width:44px;height:36px;margin-top:-15px" src="~@/assets/img/shuaxin.png">
      </span>
      <PopoverBut :checkedProps="checkedProps" style="margin-top:-16px;margin-top: -27px;margin-left: -12px;" :options="options"
        @getCheckeds="handlerCloumn"></PopoverBut>

    </section>
    <el-table size="mini" v-loading="loading" :data="tableData" style="width: 100%; margin-top: 20px" border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }" :row-class-name="tableRowClassName" @sort-change="sortthiscolumn">
      <el-table-column type="index" label="序号" width="70" align="center">
        <template slot-scope="scope">
          <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="tipCode" label="提示码" sortable="tip_code">
      </el-table-column>
      <el-table-column prop="tipDescribe" label="提示场景">
      </el-table-column>
      <el-table-column prop="tipToKeeper" label="给运维人员的提示">
      </el-table-column>
      <el-table-column prop="tipToUser" label="给用户的提示">
      </el-table-column>
      <span v-for="(item,index) in checkedProps" :key="index">
         <el-table-column  prop="createDate" :label="item" v-if="item==='创建时间'"></el-table-column>
         <el-table-column  prop="updateDate" :label="item" v-if="item==='更新时间'"></el-table-column>

      </span>
      <el-table-column prop="address" label="操作" width="122">
        <template slot-scope="scope">
          <span style="padding-right: 6px"></span>
          <el-link type="primary" :underline="false" v-if="hasPermission('sys:tipCode:edit')" @click="edit(scope.row.id)">修改
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @current-change="handleCurrentChange" :page-size="page.pageSize"
      :current-page="page.pageNo" layout="total,prev, pager, next, jumper" :total="page.total">
    </el-pagination>
    <TipCodeFrom ref="tipCodeFrom" @refreshDataList="refreshList(page, '', '', '')"></TipCodeFrom>
  </div>
</template>
<script>
  import TipCodeFrom from './tipCodeFrom'
  import PopoverBut from '@/components/button/popoverBut'
  const options1 = []
  export default {
    components: {
      TipCodeFrom,
      PopoverBut
    },
    data () {
      return {
        checkedProps: options1,
        ShowCloum: {
          createDate: ''
        },
        options: [{
          label: '更新时间',
          key: '2'
        }, {
          label: '创建时间',
          key: 'createDate'
        }],
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        tableData: [{
          tipCode: '11'
        }],
        queryForm: {
          selectValue: ''
        },
        orderBy: {
          name: 'update_date',
          method: 'desc'
        },
        loading: false
      }
    },
    methods: {
      // 获取数据列表
      refreshList (params, orderName, orderByAORC, selectValue) {
        this.loading = true
        this.$http({
          url: '/sys/tipCode/list',
          method: 'get',
          params: {
            'pageNo': params.pageNo,
            'pageSize': params.pageSize,
            'orderBy': orderName,
            'orderByAORC': orderByAORC,
            'selectValue': selectValue
          }
        }).then(({
          data
        }) => {
          if (data.code === '200') {
            this.tableData = data.result.list
            this.page.total = data.result.count
            this.loading = false
          }
        })
      },
      edit (row) {
        this.$refs.tipCodeFrom.init('edit', row)
      },
      add () {
        this.$refs.tipCodeFrom.init('add')
      },
      // 排序
      sortthiscolumn (a) {
        this.orderBy.name = a.prop
        this.page.pageNo = 1
        if (a.order === 'ascending') {
          this.orderBy.method = 'asc'
        } else {
          this.orderBy.method = 'desc'
        }
        this.refreshList(this.page, this.orderBy.name, this.orderBy.method)
      },
      // 重置查询条件
      reset () {
        this.queryForm = {}
      },
      // 是否显示某列数据
      handlerCloumn (e) {
        this.checkedProps = e
      },
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.refreshList(this.page, '', '')
      },
      tableRowClassName ({ row, rowIndex }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      }

    },
    mounted () { // dom加载完以后执行的函数，比如第一次打开网页要请求表格数据可以在这个里面写函数
      this.refreshList(this.page, '', '', '')
    }
  }
</script>
<style lang="scss" scoped>
::v-deep .el-input--small .el-input__inner {
  height: 36px;
  line-height: 32px;
  width: 230px;
}
.queryForm {
  position: relative;
  .but-container {
    top: 20px;
    margin-left: 35px;
  }
}
.right-but {
  float: right;
  margin-right: 10px;
  margin-top: -20px;
}
.el-table .success-row {
  background: #f0f9eb;
}
::v-deep .el-table .warning-row {
  background: #f7f7f7;
}
</style>
